{% extends 'base.html' %}

{% block title %}节点{% endblock %}

{% block body %}
<section class="login">
    <h1 class="heading"> <span>节点</span> Node </h1>
    <div class="row">
        <form method="post" novalidate>
            {{ form.csrf_token() }}

            {{ form.ip }}
            {% if form.ip.errors.0 %}
            <div class="error">
                <span>{{ form.ip.errors.0 }}</span>
            </div>
            {% endif %}

            {{ form.area }}
            {% if form.area.errors.0 %}
            <div class="error">
                <span>{{ form.area.errors.0 }}</span>
            </div>
            {% endif %}

            {{ form.login_url }}
            {% if form.login_url.errors.0 %}
            <div class="error">
                <span>{{ form.login_url.errors.0 }}</span>
            </div>
            {% endif %}

            <style>
                select {
                    appearance:none;
                    -moz-appearance:none;
                    -webkit-appearance:none;
                }
                select::-webkit-scrollbar{
                    display: none;
                }
            </style>
            <!-- <div class="hosttypes"> -->
            <!-- </div> -->
            {{ form.server_type }}
            {% if form.server_type.errors.0 %}
            <div class="error">
                <span>{{ form.server_type.errors.0 }}</span>
            </div>
            {% endif %}

            {{ form.server_provider }}
            {% if form.server_provider.errors.0 %}
            <div class="error">
                <span>{{ form.server_provider.errors.0 }}</span>
            </div>
            {% endif %}
            
            {{ form.server_url.label }}
            {{ form.server_url }}
            {% if form.server_url.errors.0 %}
            <div class="error">
                <span>{{ form.server_url.errors.0 }}</span>
            </div>
            {% endif %}

            {{ form.security_code }}
            {% if form.security_code.errors.0 %}
            <div class="error">
                <span>{{ form.security_code.errors.0 }}</span>
            </div>
            {% endif %}

            {{ form.server_account }}
            {% if form.server_account.errors.0 %}
            <div class="error">
                <span>{{ form.server_account.errors.0 }}</span>
            </div>
            {% endif %}

            {{ form.server_password }}
            {% if form.server_password.errors.0 %}
            <div class="error">
                <span>{{ form.server_password.errors.0 }}</span>
            </div>
            {% endif %}

            <div class="loginBtn">
                {{ form.submit() }}
            </div>
        </form>
    </div>
</section>

<section class="idc" id="idc">
    <h1 class="heading"> 快乐云&trade; <span>节点</span> </h1>
    <div class="box-container">
    {% if hosts %}
        {% for host in hosts %}
        <div class="box">

            <div class="node">
                <div class="info">
                    <h3>{{ host.id }}</h3>
                    <h3>{{ host.ip }}</h3>
                    <h1>{{ host.area }}</h1>

                    <h1>{{ host.server_state }}</h1>
                    <h1>{{ host.server_type }}</h1>
                    <h1>
                        <a href="{{ host.login_url }}">host登录地址</a>
                    </h1>
                </div>
                <i class="fas fa-quote-right"></i>
            </div>

            <div class="detail">
                <div class="line">
                    <a href="/host/del/{{ host.id }}" class="btn gradient">
                        <i class="fas fa-trash-alt"></i>删除
                        <!-- <input type="submit" value="登录" class="btn"> -->
                    </a>
                </div>
                <div class="line">
                    <a href="/host/update/{{ host.id }}" class="btn gradient">
                        <i class="fas fa-trash-alt"></i>更新
                        <!-- <input type="submit" value="登录" class="btn"> -->
                    </a>
                </div>
            </div>
            
        </div>
        {% endfor %}
        {% endif %}
    </div>
</section>

{% endblock %}

{% block footer %}
{{ super() }}
{% endblock %}

{% block script %}
    <script>
        window.onload=function(){
            var opts  = document.querySelector("#server_type");
            
            for(var i = 0; i < opts.options.length; i++)
            {
                console.log(i + ' : ' + opts.options[i].value);
                opts.options[i].setAttribute('class',' pv3 ma2 tc f3 fw6 br4 ba b--dashed b--light-pink bw2');
            }
    }
    </script>
{% endblock %}